import React, { Component } from 'react'
import { WebView, Dimensions, View, Platform } from 'react-native'

const getHTML = (uri) => {
  const { width,height } = Dimensions.get('window')
  return (`
     <video width="${width}" height="auto" controls autoplay="autoplay" >
       <source src="${uri}" type="video/mp4">
     </video>
    `)
}

const autoPlayJS = `
(function()
  {
    var videos = document.getElementsByTagName('video');
    for(var i=0;i<videos.length;i++){
      videos[i].play();
    }
  })()
`

const VideoDetail = ({data}) => {
  const uri = data.hasOwnProperty('video_src') ? data.video_src : data.uri
  return (
    <WebView source={{html:getHTML(uri)}} injectedJavaScript={autoPlayJS}/>
  )
}

export default VideoDetail
